// 导航栏组件
import React from 'react';
import { useNavigationItems, useCurrentPath, useNavigation } from '../../stores/routerStore';
import { NavigationItem } from '../../types/router';

interface NavigationBarProps {
  className?: string;
  orientation?: 'horizontal' | 'vertical';
}

export const NavigationBar: React.FC<NavigationBarProps> = ({ 
  className = '', 
  orientation = 'horizontal' 
}) => {
  const navigationItems = useNavigationItems();
  const currentPath = useCurrentPath();
  const { navigate } = useNavigation();

  const handleItemClick = (item: NavigationItem) => {
    if (!item.disabled) {
      navigate(item.path, item.viewType);
    }
  };

  const getIconComponent = (iconName: string) => {
    // 简单的图标映射，实际项目中可以使用图标库
    const iconMap: Record<string, string> = {
      'file-text': '📝',
      'bar-chart-3': '📊',
      'network': '🕸️',
      'settings': '⚙️',
    };
    return iconMap[iconName] || '📄';
  };

  const baseClasses = orientation === 'horizontal' 
    ? 'flex items-center space-x-1' 
    : 'flex flex-col space-y-1';

  return (
    <nav className={`${baseClasses} ${className}`}>
      {navigationItems.map((item) => {
        const isActive = currentPath === item.path;
        const isDisabled = item.disabled;

        return (
          <button
            key={item.id}
            className={`
              flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-colors
              ${orientation === 'vertical' ? 'w-full justify-start' : ''}
              ${isActive 
                ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' 
                : isDisabled
                  ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
                  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
              }
            `}
            onClick={() => handleItemClick(item)}
            disabled={isDisabled}
            title={item.label}
          >
            <span className={`${orientation === 'vertical' ? 'mr-3' : 'mr-2'}`}>
              {getIconComponent(item.icon)}
            </span>
            
            {orientation === 'vertical' && (
              <span className="flex-1 text-left">{item.label}</span>
            )}
            
            {orientation === 'horizontal' && (
              <span className="hidden sm:inline">{item.label}</span>
            )}

            {item.badge && (
              <span className={`
                ml-2 px-2 py-0.5 text-xs rounded-full bg-red-500 text-white
                ${orientation === 'horizontal' ? 'hidden sm:inline' : ''}
              `}>
                {item.badge}
              </span>
            )}
          </button>
        );
      })}
    </nav>
  );
};
